<template>
	<div class="trans" :style="{width:width}">
		<div class="trans-search" v-show="searchForm.some(val=>{return !!val.type})">
			<span v-for="m in searchForm" :key="m.key">
				<el-input v-if="m.type==='text'" v-model="searchFormat[m.key]" :placeholder="m.placeholder"></el-input>
			</span>
			<el-button type="primary" @click="transSearch">查询</el-button>
		</div>
		<div class="trans-main" v-if="!!listData.length">
			<div class="trans-table">
				<div class="trans-data">
					<div class="trans-auto">
						<div class="trans-title">
							{{title.left}}
						</div>
						<div><el-checkbox :indeterminate="isIndeterminate" v-model="allSelect" @change="selectAll">全选</el-checkbox></div>
				  		<div v-for="m in listData" :key="m.id"><el-checkbox :label="getLabel(m)" v-model="m.select" @change="selectOne(m)">{{getLabel(m)}}</el-checkbox></div>
					</div>
				</div>
				<div class="trans-add">
					<div class="trans-auto">
						<div class="trans-title">
							{{title.right}}
						</div>
						<ul>
							<li v-for="(m,index) in selectData" :key="m.id"><span>{{getLabel(m)}}<i class="el-icon-delete" @click="deleteCheck(index)"></i></span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="table-page">
				<el-pagination
					background
					@size-change="changePage"
					@current-change="transSearch"
					:current-page.sync="searchFormat.pageNo"
					:page-sizes="[10, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal">
				</el-pagination>
			</div>
		</div>
		<div v-else style="height:50px;padding-left:60px;">
			未查询到供应商数据
		</div>
	</div>
</template>
<script>
	/**供应商组件
	 * selectData:[]右侧已选择数据data
	 * width:''穿梭框宽度
	 * url:''请求地址必填
	 * searchForm:[{}]查询条件,key查询key值，type查询类型（给空值表示隐藏），value默认值，placeholder提示内容
	 * isQsparams：true 参数是否通过qs包裹，默认为true
	 */
	import qs from 'qs';
	export default {
		props: {
			isQsparams:{
				type: Boolean,
				default:true
			},
			title:{
				type: Object,
				default: {
					left:'',
					right:''
				}
			},
			selectData:{
				type: Array,
				default: []
			},
			checkName:{
				type: Array,
				default: ['vendorName']
			},
			width:{
				type: String,
				default: '500px'
			},
			url:{
				type: String,
				default: ''
			},
			searchForm:{
				type: Array,
				default:[
					{key:'vendorCodeOrVendorName',type:'text',placeholder:'请输入名称',value:''}
				]
			},
		},
		computed:{
			isIndeterminate(){
				let data=[];
				this.listData.forEach(val=>{
					this.selectData.some(select=>{return select.id===val.id})?data.push(val):null
				});
				return !!data.length&&!this.allSelect;
			}
		},
		data () {
			return {
				searchFormat:{
					pageSize:10,
					pageNo:1
				},
				allSelect:false,
				listData:[]
			}
		},
		mounted(){
			this.initData();
		},
		methods:{
			getLabel(m){
				let data='';
				this.checkName.forEach(val=>{data+=m[val]});
				return data
			},
			initData(){ //查询表单初始化,将数组=>Object用于数据双向绑定
				this.searchForm.forEach((item)=>{
					this.$set(this.searchFormat, item.key, item.value||'');
				});
				this.searchTrans(this.searchFormat);
			},
			selectOne(val){
				let index=this.selectData.findIndex(select=>{return select.id===val.id});
				if(index<0){
					this.selectData.push(val);
				}else{
					this.selectData.splice(index,1)
				}
				this.allSelect=this.setAllcheck();
				this.$emit('transAdd',this.selectData)
			},
			selectAll(val){
				if(!val){
					this.listData.forEach((row,index) => {
						row.select=false;
						this.selectData.splice(this.selectData.findIndex(select=>{return select.id===row.id}),1);
						this.$set(this.listData,index,row);
					});
				}else{
					this.listData.forEach((row,index) => {
						row.select=true;
						!this.selectData.some(select=>{return select.id===row.id})?this.selectData.push(row):null;
						this.$set(this.listData,index,row);
					});
				}
				this.$emit('transAdd',this.selectData)
			},
			setAllcheck(){
				let data=0;
				this.listData.forEach(val=>{
					this.selectData.some(select=>{return select.id===val.id})?data++:null
				});
				return data===this.listData.length;
			},
			changePage(size){
				this.searchFormat.page=1;
				this.searchFormat.rows=size;
				this.transSearch();
			},
			searchTrans(parameter){
				if(!this.url)return;
				var par = {};
				if (parameter != "") {
					par = this.isQsparams?qs.stringify(parameter):parameter
				}
				this.axios.post(this.url,par).then((res) => {
					this.pageTotal=res.data.total;
					this.listData=res.data.rows;
					this.$nextTick(()=>{
						this.resetCheck();
					})
				})
				.catch(function (error) {
					console.log(error);
				});
			},
			transSearch(){
				this.searchTrans(this.searchFormat)
			},
			transAdd(){
				this.$emit('transAdd',this.selectData)
			},
			deleteCheck(index){
				this.selectData.splice(index,1);
				this.resetCheck();
				this.$emit('transAdd',this.selectData)
			},
			resetCheck(){
				if(!!this.listData.length) {
					this.listData.forEach((row,index) => {
						row.select=this.selectData.some(select=>{return select.id===row.id});
						this.$set(this.listData,index,row);
					});
					this.allSelect=this.setAllcheck();
				}
			}
		}
	}
</script>
<style scope>
	.trans{
		margin:0 auto;
		border:1px solid #dadada;
	}
	.trans-search{
		padding:10px 20px;
		width:50%;
		text-align: right;
	}
	.trans-main{
		width:100%;
	}
	.trans-auto{
		min-height: 300px;
		max-height: 600px;
		overflow: auto;
	}
	.trans-search .el-input{
		width:75%;
	}
	.trans-table{
		display: table;
		min-height: 300px;
		width: 100%;
	}
	.trans-add{
		border: 1px solid #dadada;
		border-right: 0;
		border-left: 0;
	}
	.trans-data{
		border: 1px solid #dadada;
		border-left: 0;
	}
	.trans-data,.trans-add{
		display: table-cell;
		width: 50%;
		padding: 10px;
	}
	.trans-data>div,.trans-auto div{
		width: 100%;
		padding: 10px 20px;
		margin:0;
	}
	.trans-add ul li span{
		margin: 5px;
		padding: 2px 10px;
		display: inline-block;
		text-align: left;
		border: 1px solid #cacaca;
		border-radius: 5px;
	}

	.trans-add ul li span:hover{
		border: 1px solid #409EFF;
		color:#409EFF;
	}
	.trans-add ul li span .el-icon-delete{
		cursor: pointer;
		color:#DA1F24;
		margin-left: 10px;
	}
	.table-page{
		margin: 10px 0 0 25px;
		text-align: left;
	}
</style>
